<template>
    <div>
        <van-nav-bar
                title="订单"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
    </div>
    <div>
        <van-field
                v-model="result1"
                is-link
                readonly
                name="picker"
                label="房间"
                placeholder="点击选择房间类型"
                @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
                    :columns="columns1"
                    @confirm="onConfirm1"
                    @cancel="showPicker = false"
            />
        </van-popup>
    </div>
    <div style="padding-top: 2rem">
        <van-field name="stepper" label="天数">
            <template #input>
                <van-stepper v-model="value1" />
            </template>
        </van-field>
    </div>
   <div style="padding-top: 5rem">
       <van-cell title="选择入住日期" :value="date" @click="show = true" />
       <van-calendar v-model:show="show" @confirm="onConfirm" />
   </div>
    <div>
        <van-submit-bar :price="this.$route.query.price*100*value1" button-text="立即支付" @submit="onSubmit" />
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "HotelOrderView",
        show:null,
        columsl:null,
        setup() {
            const value1 = ref(1);
            const date = ref('');
            const show = ref(false);
            const onClickLeft = () => history.back();
            const formatDate = (date) => `${date.getYear()+1900}/${date.getMonth() + 1}/${date.getDate()}`;
            const onConfirm = (value) => {
                    show.value = false;
                    date.value = formatDate(value);
            };
            const result1 = ref('');
            const showPicker = ref(false);
            const columns1 = ['单人间', '大床房', '双人床', '豪华套间'];

            const onConfirm1 = (value) => {
                result1.value = value;
                showPicker.value = false;
            };
                    return {
                        onClickLeft,
                        value1,
                        date,
                        show,
                        onConfirm,
                        result1,
                        columns1,
                        onConfirm1,
                        showPicker,
                    };
                },
        data(){
            return{
                obj:{
                    uid:this.$store.state.user.uid,
                    hid:this.$route.query.id,
                    price:0,
                    room:"",
                    time:""
                }
            }
        },
        methods:{
            //订单发起请求
            onSubmit() {
                var that=this;
                this.obj.room=this.result1;
                this.obj.time=this.date;
                this.obj.price=this.$route.query.price*this.value1;
                this.axios.post("http://localhost:8081/api/hotel/order.do",this.obj).then(res => {
                    if (res.data.code == 200) {
                        document.write("'"+res.data.data+"'");
                    } else {
                        Toast(res.data.msg);
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>